<template>
  <div class="change-label">
    <p class="tit">筛选档案</p>
    <div class="label-list" v-for="(item, index) in labelData" :key="index">
      <div class="search-box" v-if="item.list.length">
        <span v-if="item.name =='PER_OCCUPATION'">职业</span>
        <span v-if="item.name =='ATW_LANG'">语种</span>
        <span v-if="item.name =='ATW_LOCATION'">注册地</span>
        <span v-if="item.name =='PER_WORK_PLACE_P' || item.name == 'ORG_LOCATION_P'">地域</span>
        <span v-if="item.name =='PER_LABEL' || item.name =='ORG_LABEL'">标签</span>
        <span v-if="item.name =='THEME_LABEL'">标签</span>
        <el-autocomplete
          v-model="item.model"
          class="search-label"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          @focus="setRestaurants(item)"
        ></el-autocomplete>
      </div>
      <ul class="label-ul" :class="item.showAll ? 'show-all' : ''" v-if="item.list.length">
        <li
          class="label-item"
          v-for="(items, indexs) in item.list"
          :key="indexs"
          @click="changeLabel(item, items)"
          :class="changeVal == items.value ? 'active' : ''"
        >
          {{ items.value }}
        </li>
      </ul>
      <p
        class="more"
        v-show="item.list.length > 6"
        @click="item.showAll = !item.showAll"
      >
        查看更多<i
          :class="['jt', 'el-icon-d-arrow-right', !item.showAll ? '' : 'rot']"
        ></i>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "changLabel",
  props: {
    labelData: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      PER_OCCUPATION:'',
      PER_WORK_PLACE_P:'',
      PER_LABEL:'',
      restaurants: [],
      name:"",
      type:"",
      changeVal: "",
    };
  },
  computed: {
  },
  methods: {
    setRestaurants(item) {
      this.restaurants = [...item.list]
      this.name = item.name
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString?restaurants.filter(this.createStateFilter(queryString)):[{ value: "暂无数据" }];
      results = results.length ? results : [{ value: "暂无数据" }];
      cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.changeVal = item.value;
      this.handleLabel(item.value)
    },
    changeLabel(item, childItem) {
      this.changeVal = childItem.value;
      this.name=item.name
      this.handleLabel(childItem.value)
    },
    handleLabel(value){
      this.$emit('handleLabel',{value:value,name:this.name})
    }
  },
};
</script>

<style lang="scss" scoped>
.change-label {
  padding: 20px 30px;
  background: #1f2025;
  .tit {
    font-size: 18px;
    color: #eee;
    line-height: 20px;
    margin-bottom: 18px;
    font-weight: 700;
  }
  .label-list{
    margin-bottom:20px;
  }
  .search-box {
    display: flex;
    span {
      width: 54px;
      line-height: 34px;
      font-size: 14px;
      color: #b8becc;
    }
    .s2{
      width:90px;
    }
    .search-label /deep/ {
      flex: 1;
      .el-input__inner {
        height: 34px;
        border: 1px solid #3d434d;
        background: transparent;
        color: #fff;
      }
    }
  }
  .label-ul {
    padding-top: 20px;
    max-height: 215px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .show-all {
    max-height: 100000px;
    overflow: inherit;
  }
  .label-item {
    padding-left: 40px;
    font-size: 14px;
    color: #b8becc;
    line-height: 16px;
    margin-bottom: 18px;
    cursor: pointer;
    &:hover {
      color: #cc7029;
    }
    &.active {
      color: #cc7029;
    }
  }
  .more {
    padding-left: 40px;
  }
}
</style>
